<template>
  <a-radio-group v-model:value="selectStatus" class="content-margin custom-radio"  @change="changeStatus" button-style="solid">
    <a-radio-button value="1">全部</a-radio-button>
    <a-radio-button value="2">未结束</a-radio-button>
    <a-radio-button value="5">准备装柜</a-radio-button>
    <a-radio-button value="3">即将到达</a-radio-button>
    <a-radio-button value="6">上架中</a-radio-button>
    <a-radio-button value="7">已完成</a-radio-button>
    <a-radio-button value="0">取消</a-radio-button>
  </a-radio-group>
  <common-search :show-item="2" :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
  <a-button type="primary"  @click="openAddModal = true" v-modulePerm="['shippingMessage:add']">新增</a-button>
  <a-button type="primary" style="margin-left: 10px;" @click="uploadModalOpen"  v-modulePerm="['shippingMessage:upload']">上传文件</a-button>
  <a-button type="primary" style="margin-left: 10px;" :loading="uploadLoading" @click="exports"  v-modulePerm="['shippingMessage:export']">
    <template #icon>
      <ExportOutlined />
    </template>
    导出
  </a-button>
  <common-table
      :customFilterDropdown="true"
      :columns="columns"
      :dataSource="dataList"
      v-model:localPagination="page"
      @paginationChange="onPageChange"
      v-model:loading="loading"
      :rowKey="(record) => record.id"
      :scroll="{ x: 'max-content'}"
      :slots="['containerNo','bookingNo','operation','headPath']"
  >
    <template #containerNo="{record}">
      <a @click="$router.push(`shippingDetail?id=${record.id}`)">{{record.containerNo}}</a>
    </template>
    <template #bookingNo="{record}">
      <a @click="$router.push(`shippingDetail?id=${record.id}`)">{{record.bookingNo}}</a>
    </template>
    <template #headPath="{record}">
      <headPath :record="record"></headPath>
    </template>
    <template #operation="{record}">
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          更多
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item v-if="!record.containerNo && modulePerm(['shippingMessage:tie'])">
              <a type="link" @click="openTieNumber(record)">
                绑定柜号
              </a>
            </a-menu-item>
            <a-menu-item v-if="modulePerm(['shippingMessage:delete'])">
              <a-popconfirm
                  title="是否要删除?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="delOne(record)"
              >
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
  </common-table>
  <tieNumber :Id="Id" :bookingNo="bookingNo" :visible="openTie" :openTie="openTie" @close="closeTie"></tieNumber>
  <add-shipping-message :open-add="openAddModal" @close="closeAddModal" />
  <upload-file ref="upFile" :type="'upload'" :method="'post'" :name="'异常数据'" :url="'/tms/shippingTrack/upload'" @search="search"/>
</template>
<script>
export default {
  name:'firstShipping-shippingMessage'
}
</script>
<script setup>
import { ref,onMounted } from "vue";
import {modulePerm} from "@utils/modulePerm.js";
import CommonTable from "@/components/commonTable/index.vue";
import CommonSearch from "@/components/commonSearch/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {getManyDictItems} from "@/api/system/dict.js";
import {getOverseaWarehouse, getShippingTrack} from "@/api/firstShipping/shippingMessage.js";
import headPath from "@/views/firstShipping/components/headPath.vue";
import tieNumber from "@/components/modal/tieNumber.vue"
import {deleteOne} from "@/api/system/index.js";
import {message} from "ant-design-vue";
import {postFile} from "@utils/service/index.js";
import AddShippingMessage from "@/components/modal/addShippingMessage.vue";
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getShippingTrack,
  queryFactory: () => ({
    sortField:"loadingTime",
    sortType:"desc",
    status:'2'
  }),
  beforeSearch:()=>{
    //处理日期
    if(query.value.time1){
      query.value.loadingTimeBegin = query.value.time1[0]
      query.value.loadingTimeEnd = query.value.time1[1]
    }else{
      delete query.value.loadingTimeBegin
      delete query.value.loadingTimeEnd
    }
    if(query.value.time2){
      query.value.etaDateBegin = query.value.time2[0]
      query.value.etaDateEnd = query.value.time2[1]
    }else{
      delete query.value.etaDateBegin
      delete query.value.etaDateEnd
    }
    if(query.value.time3){
      query.value.ataDateBegin = query.value.time3[0]
      query.value.ataDateEnd = query.value.time3[1]
    }else{
      delete query.value.ataDateBegin
      delete query.value.ataDateEnd
    }
    if(query.value.time4){
      query.value.arrivalWarehouseTimeBegin = query.value.time4[0]
      query.value.arrivalWarehouseTimeEnd = query.value.time4[1]
    }else{
      delete query.value.arrivalWarehouseTimeBegin
      delete query.value.arrivalWarehouseTimeEnd
    }
  }
});
const columns = [
  {
    title: '柜号',
    width: 140,
    dataIndex: 'containerNo',
    key: 'containerNo',
    align: 'center',
  },
  {
    title: '提货号',
    width: 180,
    dataIndex: 'bookingNo',
    key: 'bookingNo',
    align: 'center',
  },
  {
    title: '船东',
    width: 100,
    dataIndex: 'shipOwner',
    key: 'shipOwner',
    align: 'center'
  },
  {
    title: '起运港',
    width: 120,
    dataIndex: 'shipmentPort',
    key: 'shipmentPort',
    align: 'center'
  },
  {
    title: '目的港',
    width: 150,
    dataIndex: 'targetPort',
    key: 'targetPort',
    align: 'center'
  },
  {
    title: '国家',
    width: 90,
    dataIndex: 'country',
    key: 'country',
    align: 'center'
  },
  {
    title: '目的仓',
    width: 160,
    dataIndex: 'toWarehouseCode',
    key: 'toWarehouseCode',
    align: 'center'
  },
  {
    title: '装柜日期',
    width: 120,
    dataIndex: 'loadingTime',
    key: 'loadingTime',
    align: 'center',
  },
  {
    title: 'ETA',
    width: 120,
    dataIndex: 'etaDate',
    key: 'etaDate',
    align: 'center',
  },
  {
    title: '卸船时间',
    width: 120,
    dataIndex: 'unloadContainerTime',
    key: 'unloadContainerTime',
    align: 'center',
  },
  {
    title: '送仓时间',
    width: 120,
    dataIndex: 'shelvesAddedTime',
    key: 'shelvesAddedTime',
    align: 'center',
  },
  {
    title: '送仓时间',
    width: 120,
    dataIndex: 'arrivalWarehouseTime',
    key: 'arrivalWarehouseTime',
    align: 'center',
  },
  {
    title: '头程轨迹',
    dataIndex: 'headPath',
    width: 100,
    key: 'headPath',
    align: 'center',
  },
  {
    title: '操作',
    width: 100,
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
  }
]
const formItems = ref([
  {
    label:'柜号',
    type:'input',
    field:'containerNo',
  },
  {
    label:'提货号',
    type:'input',
    field:'bookingNo',
  },
  {
    label:"目的仓",
    type:'autoComplete',
    field: 'toWarehouseCode',
    options:[]
  },
  {
    label:'国家',
    type:'select',
    field:'country',
    options:[]
  },
  {
    label:'装柜日期',
    type:'rangePicker',
    field:'time1',
    showTime: false,
  },
  {
    label:'ETA',
    type:'rangePicker',
    field:'time2',
    showTime: false,
  },
  {
    label:'ATA',
    type:'rangePicker',
    field:'time3',
    showTime: false,
  },
  {
    label:'送仓日期',
    type:'rangePicker',
    field:'time4',
    showTime: false,
  },
])
const openTie = ref(false)
const uploadLoading = ref(false)
const upFile = ref(null)
const selectStatus = ref('2')
const openAddModal = ref(false)
const bookingNo = ref('')
const Id = ref('')
/**
 * 关闭绑定柜号弹窗
 */
const closeTie = () => {
  openTie.value = false
  search()
}

/**
 * 初始化字典数据
 * @returns {Promise<void>}
 */
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"country"
    })
    formItems.value[3].options = res.result.country
    const res1 = await getOverseaWarehouse({})
    formItems.value[2].options = res1.result.records.map(item => ({value:item}))
  }catch (e){
    console.log(e)
  }
}
/**
 * 打开绑定柜号弹窗
 * @param record
 */
const openTieNumber = (record) => {
  openTie.value = true
  bookingNo.value = record.bookingNo
  Id.value = record.id
}

const exports = async () => {
  try{
    uploadLoading.value = true
    const res = await postFile('/tms/shippingTrack/export','post',query.value,'海运信息.xlsx')
    message.success('导出成功')
  }catch (e){
    message.error(e)
  }finally {
    uploadLoading.value = false
  }
}
/**
 * 删除
 * @param record
 * @returns {Promise<void>}
 */
const delOne = async (record) => {
  try{
    console.log(record)
    const res = await deleteOne('/tms/shippingTrack/remove',{id:record.id})
    message.success('删除成功')
    search()
  }catch (e){
    message.error(e)
  }
}

const uploadModalOpen = () => {
  upFile.value.handleShow()
}
/**
 * 关闭新增弹窗
 */
const closeAddModal = () => {
  openAddModal.value = false
  search()
}
const changeStatus = () => {
  query.value.status = selectStatus.value
  search()
}
onMounted(() => {
  init()
})
</script>

<style scoped>
.content-margin {
  margin-bottom: 15px;
}

.custom-radio {
  .ant-radio-button-wrapper {
    background-color: #1890ff;
    color: white;

    &.ant-radio-button-wrapper-checked {
      background-color: #ff4d4f;
      border-color: #ff4d4f;
    }
  }
}
</style>
